<template>
  <div class="skill-detail-page">
    <van-loading class="flex-align-center" size="36" v-if="loading" />
    <template v-if="data && data.id">
      <div class="baseinfo-layout comp-layout">
        <h1 class="title">{{ data.title }}</h1>
        <div>
          <span class="skill-price">
            <template v-if="data.showPrice == '面议'">{{ data.showPrice }}</template>
            <template v-else>
              {{ data.showPrice.split('/')[0] }}
              <span>/{{ data.showPrice.split('/')[1] }}</span>
            </template>
          </span>
          <span class="" v-if="data.skillCategory"># {{ data.skillCategory }}</span>
        </div>
        <div class="userinfo">
          <img class="avatar" :src="data.avatar" alt="" />
          <span class="nickname single-line-ellipsis">{{ data.nickname }}</span>
          <svg-icon icon="icon-auth" v-if="data.identified == 1" className="icon-auth" />
          <svg-icon icon="icon-auth2" v-if="data.identified == 2" className="icon-auth" />
        </div>
        <div class="line"></div>

        <!-- 具体技能 -->
        <div class="skill-content">
          <div v-html="data.remark"></div>
        </div>
      </div>

      <!-- 其他技能 -->
      <div class="skill-list" v-if="skillList && skillList.length">
        <div class="skill-list-title comp-layout">
          <div class="single-line-ellipsis">{{ data.nickname }}的其他技能</div>
          <div class="border"></div>
        </div>
        <div class="skill-box">
          <div class="skill-scroll">
            <div
              v-for="item in skillList"
              :key="item.id"
              class="skill-item"
              v-app-jump="{ to: toJM }"
            >
              <div class="flex ">
                <div class="skill-item-category single-line-ellipsis">
                  # {{ item.skillCategory }}
                </div>
                <div class="skill-item-price single-line-ellipsis">
                  <template v-if="item.showPrice == '面议'">{{ item.showPrice }}</template>
                  <template v-else>
                    {{ item.showPrice.split('/')[0] }}
                    <span>/{{ item.showPrice.split('/')[1] }}</span>
                  </template>
                </div>
              </div>
              <div class="skill-title single-line-ellipsis">{{ item.title }}</div>
              <div class="skill-item-content double-line-ellipsis">
                <img class="left" src="../../assets/images/left-quota.png" />
                <div class="remark-content">
                  {{ item.remark }}
                  <span>详情</span>
                </div>
                <img class="right" src="../../assets/images/right-quota.png" />
              </div>
            </div>
            <div class="gap"></div>
          </div>
        </div>
      </div>
      <!-- 查看作品 -->
      <div class="comp-layout">
        <div class="other-works" v-app-jump="{ to: toJM }">
          <div>查看TA的作品</div>
          <div class="num-font">
            {{ data.creationCnt }}
            <svg-icon icon="icon-arrow-up"></svg-icon>
          </div>
        </div>
      </div>
      <!-- 联系他 -->
      <div class="contact-him" v-app-jump="{ to: toJM }" :class="{ inApp: $UA.isJM }" v-if="id">
        <img :src="data.avatar" alt="" />
        <span>联系TA</span>
      </div>

      <!-- 在app外打开app -->
      <bottom-open-app-adv v-if="!$UA.isJM" v-app-jump="{ to: toJM }"></bottom-open-app-adv>
    </template>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Loading, Toast } from 'vant';
  import qs from 'qs';
  export default {
    components: {
      BottomOpenAppAdv,
      'van-loading': Loading,
      // 'van-button': Button,
      // 'van-nav-bar': NavBar,
      // 'van-icon': Icon,
    },
    data() {
      return {
        // 跳转到积幕里面的页面
        skillList: [], // 技能列表
        data: {}, // 页面数据
        id: '', // 技能ID
        uuid: '', // 用户ID
        loading: false,
      };
    },
    computed: {
      toJM() {
        return `mtjimu://skill?id=${this.id}`;
      },
    },
    mounted() {
      this.$appService.setNav({
        title: '技能详情',
      });

      const { id, uuid } = qs.parse(window.location.search.replace(/^\?/, ''));
      this.id = id;
      this.uuid = uuid;

      if (!this.id) {
        Toast('缺少ID');
        return;
      }

      this.getSkillData();

      // PV上报
      // this.$MutongPv.pv({
      //   pt: 'jm',
      //   pid: 'skilldetail',
      //   bid: this.id || '',
      // });
    },
    methods: {
      // 技能详情
      getSkillData() {
        this.loading = true;
        this.$service
          .UserSkillInfo({
            id: this.id,
          })
          .then((res) => {
            this.data = res;
            this.getSkillList(res.uid);
            this.loading = false;

            // 微信分享
            wx.ready(() => {
              let _ = {
                title: res.title,
                subTitle: res.detail,
                url: `https://${
                  process.env.NODE_ENV === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/jobdetail.html?id=${this.id}`,
                image:
                  'https://mutong-ketang-img.oss-cn-shanghai.aliyuncs.com/app/demand-share.jpg',
              };
              this.$setShareInfo({ ..._ });
            });
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
            Toast(err.data.message || err.data.error);
          });
      },
      // 技能列表
      getSkillList(uuid) {
        this.$service
          .UserSkillList({
            skillId: this.id,
            uuid,
          })
          .then((res) => {
            this.skillList = res;
          })
          .catch((err) => {
            Toast(err.data.message);
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .skill-detail-page {
    padding-bottom: 13rem;
    max-width: 75rem;
    min-height: 100vh;
    color: #111111;
    font-size: 1.4rem;
    .comp-layout {
      padding: 0 2rem;
    }
    .baseinfo-layout {
      padding-top: 2rem;
      padding-bottom: 2.5rem;
      .title {
        font-size: 2.2rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1rem;
      }
      .skill-price {
        font-size: 1.7rem;
        font-family: DIN;
        font-weight: bold;
        color: #2247ff;
        margin-right: 1rem;
        span {
          font-size: 1rem;
          font-weight: 400;
          color: #2247ff;
        }
      }
      .userinfo {
        display: flex;
        align-items: center;
        margin-top: 1.4rem;
        .avatar {
          width: 2.3rem;
          height: 2.3rem;
          border: 0rem solid rgba(#000000, 0.05);
          border-radius: 50%;
          flex: none;
        }
        .nickname {
          font-size: 1.4rem;
          font-weight: 800;
          margin: auto 0.6rem auto 0.8rem;
        }
        .icon-auth {
          width: 1.4rem;
          height: 1.4rem;
          border-radius: 50%;
          flex: none;
        }
      }
      .line {
        margin: 1.7rem 0 2.2rem;
        width: 100%;
        height: 0.1rem;
        background: #f3f3f3;
      }
      .skill-content {
        font-size: 1.5rem;
        font-weight: 400;
        color: rgba(#111111, 0.9);
        line-height: 2.4rem;
      }
    }

    .skill-list {
      .skill-list-title {
        position: relative;
        font-size: 1.7rem;
        font-weight: 800;
        color: #111111;
        position: relative;
        display: inline-block;
        .border {
          position: absolute;
          top: 1.3rem;
          left: 2rem;
          right: 2rem;
          height: 1.1rem;
          background: #888888;
          opacity: 0.1;
        }
      }
      .skill-box {
        width: 100%;
        overflow: scroll;
        padding: 2rem;
      }
      .skill-scroll {
        display: flex;
        -webkit-overflow-scrolling: touch;
        .skill-item {
          width: 27.5rem;
          height: 14.3rem;
          flex: none;
          background: #ffffff;
          box-shadow: 0rem 0.1rem 1.6rem 0.1rem rgba(0, 0, 0, 0.05);
          border-radius: 0.5rem;
          margin-right: 1.3rem;
          padding: 1.4rem;
          .flex {
            justify-content: space-between;
          }
          .skill-item-category {
            font-size: 1.4rem;
            font-weight: 800;
            color: #111111;
          }
          .skill-item-price {
            font-size: 1.6rem;
            font-family: DIN;
            font-weight: bold;
            color: #2247ff;
            span {
              font-size: 0.8rem;
              font-weight: 400;
              color: #2247ff;
            }
          }
          .skill-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: #111111;
            margin: 0.6rem 0 0.9rem;
          }
          .skill-item-content {
            position: relative;
            .left,
            .right {
              position: absolute;
              width: 2.4rem;
              height: 2rem;
            }
            .left {
              top: 0;
              left: 0;
            }
            .right {
              right: 0;
              bottom: 0;
            }
            .remark-content {
              font-size: 1.2rem;
              font-weight: 400;
              color: #111111;
              line-height: 2.3rem;
              padding: 0.8rem 1.3rem 0.2rem;
              span {
                color: #2247ff;
              }
            }
          }
        }
        .gap {
          width: 0.7rem;
          flex: none;
        }
      }
    }
    .other-works {
      width: 100%;
      height: 5.3rem;
      background: #f3f3f3;
      border-radius: 0.5rem;
      margin: 0 auto 2rem;
      font-size: 1.4rem;
      font-weight: 800;
      color: #111111;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      .num-font {
        font-weight: bold;
        svg {
          height: 1.3rem;
          width: 1.3rem;
          transform: rotate(-90deg);
        }
      }
    }

    // 联系他
    .contact-him {
      position: fixed;
      right: 1.9rem;
      bottom: 9rem;
      width: 12.7rem;
      height: 5rem;
      border-radius: 2.5rem;
      display: flex;
      align-items: center;
      overflow: hidden;
      -webkit-backdrop-filter: saturate(200%) blur(3rem);
      backdrop-filter: saturate(200%) blur(3rem);
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: #000;
        opacity: 0.54;
        box-shadow: 0rem 1.7rem 2.8rem 0rem rgba(0, 0, 0, 0.56);
      }
      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        margin-left: 0.5rem;
      }
      span {
        margin-left: 1.4rem;
        font-size: 1.4rem;
        font-weight: 800;
        color: #ffffff;
      }
    }
    .inApp {
      bottom: 2.5rem;
    }
    .van-loading {
      margin: 10rem auto 0;
    }
  }
</style>
